<template>
  <div>
    <button @click="comName = 'QrCode'">扫码登录</button>
    <button @click="comName = 'UserPass'">账号密码登录</button>

    <!-- <keep-alive> -->

      <!-- 我要指定多个被缓存，就逗号隔开 -->
     <!-- <keep-alive include="UserPass,QrCode"> -->

      <!-- 除了某些组件，其他都缓存 -->
     <keep-alive exclude="QrCode">
      <!-- 动态组件 -->
      <component :is="comName"></component>
    </keep-alive>
    <hr />

    <!-- 动态组件的本质相当于内部用的是v-if -->
    <!-- <qr-code v-if="comName === 'QrCode'" />
    <user-pass v-else-if="comName === 'UserPass'" /> -->
  </div>
</template>

<script>
import QrCode from './components/QrCode.vue'
import UserPass from './components/UserPass.vue'
export default {
  components: {
    QrCode,
    UserPass
  },
  data () {
    return {
      comName: 'UserPass'
    }
  }
}
</script>

<style></style>
